<template>
  <div class="pt34">
    <div class="baseInfo">
      <div class="baseInfoLR flex flex-between">
        <div class="left flex">
          <img :src=baseInfo.avatar>
          <div>
            <p class="text1">{{ baseInfo.phoneNumber }}</p>
            <p class="text2">{{ baseInfo.rights }}项权益</p>
          </div>
        </div>
        <div class="right textAlignCenter">
          <p>全球通银卡</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "baseInfo",
  props: {
    baseInfo: {
      type: Object,
      default() {
        return {
          avatar: require("@/assets/logo.png"),
          phoneNumber: "88888888888",
          rights: 0, //可享权益
          integration: 0 //积分
        }
      }
    }
  }
}
</script>

<style scoped>
.pt34 {
  padding-top: 3.4rem;
}

.baseInfo {
  margin: 0 .35rem 0 .35rem;
  height: 1.95rem;
  background: url("../../assets/img/home/baseBack.png") no-repeat;
  background-size: cover;
}

.left {
  margin: .24rem 0 0 .67rem;
}

.left img {
  width: .83rem;
  height: .83rem;
}

.text1 {
  font-size: 0.37rem;
  font-weight: 500;
  color: #3C3C3C;
  line-height: .53rem;
}

.text2 {
  font-size: 0.27rem;
  font-weight: 400;
  color: #3C3C3C;
  line-height: .37rem;
}

.right {
  margin: .32rem .59rem 0 0;
  width: 1.95rem;
  height: .59rem;
  background: linear-gradient(46deg, #5E8CCD 0%, #6C9CE5 100%);
  border-radius: 0.32rem;
}

.right p {
  width: 1.95rem;
  height: .59rem;
  line-height: .59rem;
  font-size: 0.32rem;
  font-weight: 400;
  color: #E5E5E5;
  margin: 0 auto;
}
</style>